<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="项目信息" name="tabOne"></el-tab-pane>
            <el-tab-pane label="研究者信息" name="tabTwo"></el-tab-pane>
            <el-tab-pane label="版本信息" name="tabThree"></el-tab-pane>
        </el-tabs>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm"
            :disabled="type == 'look'">
            <!-- 项目信息 begin -->
            <div :style="{
                width: activeName == 'tabOne' ? '100%' : '1px',
                height: activeName == 'tabOne' ? '100%' : '1px',
                overflow: activeName == 'tabOne' ? 'auto' : 'hidden',
            }">
            <div>
                <el-form-item label="申办方" style="width:50%;display: inline-block;"  prop="sponsorId">
                        <el-select size="small" style="width:100%" v-model="ruleForm.sponsorId" placeholder="请选择申办方" @change="
                            (e) => {
                                sponsorChange(e)
                            }
                        ">
                            <el-option :label="select.label" :value="select.value.toString()"
                                v-for="(select, sIndex) in sponsorList" :key="sIndex"></el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item style="width:50%;display: inline-block;" label="CRO"  prop="croId">
                        <el-select style="width:100%" size="small" v-model="ruleForm.croId" placeholder="请选择CRO" @change="
                            (e) => {
                                croChange(e)
                            }
                        ">
                            <el-option :label="select.label" :value="select.value.toString()"
                                v-for="(select, sIndex) in croList" :key="sIndex"></el-option>
                        </el-select>

                    </el-form-item>
            </div>
                <el-form-item style="width:50%;display: inline-block;" label="项目名称"  prop="pmName">
                    <el-input size="small" v-model="ruleForm.pmName"></el-input>
                </el-form-item>
                <el-form-item style="width:50%;display: inline-block;" label="项目简称" prop="pmSimpleName">
                    <el-input size="small"  v-model="ruleForm.pmSimpleName"></el-input>
                </el-form-item>
                <el-form-item style="width:50%;display: inline-block;" label="批件号/备案号" prop="filingsNum">
                    <el-input size="small" v-model="ruleForm.filingsNum"></el-input>
                </el-form-item>
                <el-form-item style="width:50%;display: inline-block;" label="本中心编号" prop="centerNum">
                    <el-input size="small" v-model="ruleForm.centerNum"></el-input>
                </el-form-item>
                <el-form-item style="width:50%;display: inline-block;" label="内部编号"  prop="innerPlanNum">
                    <el-input size="small" v-model="ruleForm.innerPlanNum"></el-input>
                </el-form-item>
                <el-form-item label="生物样本检测公司" prop="expSampleCompany">
                    <el-input size="small" v-model="ruleForm.expSampleCompany"></el-input>
                </el-form-item>
                <el-form-item label="数据管理与统计公司" prop="dataMagAlys">
                    <el-input size="small" v-model="ruleForm.dataMagAlys"></el-input>
                </el-form-item>
                <el-form-item  label="样品标签标题" prop="sampleLableTitle">
                        <el-radio-group  v-model="ruleForm.sampleLableTitle">
          <el-radio v-for="(item, index) in xmtype" :key="index" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
                
                    </el-form-item>
                     <el-form-item style="width:50%;display: inline-block;" v-if="ruleForm.sampleLableTitle == '2'"   label="方案编号"  prop="planNum">
                                <el-input size="small" v-model="ruleForm.planNum"></el-input>
                            </el-form-item>
                             <el-form-item style="width:50%;display: inline-block;" v-if="ruleForm.sampleLableTitle == '1'"  label="项目编号"  prop="pmNum">
                                <el-input size="small" v-model="ruleForm.pmNum"></el-input>
                            </el-form-item>
            </div>
            <!-- 项目信息 end -->

            <!-- 研究者信息 begin -->
            <div :style="{
                width: activeName == 'tabTwo' ? '100%' : '1px',
                height: activeName == 'tabTwo' ? '100%' : '1px',
                overflow: activeName == 'tabTwo' ? 'auto' : 'hidden',
            }">
                <el-form-item label="研究者信息"  prop="researcherInfo">
                    <el-input type="textarea" size="small" v-model="ruleForm.researcherInfo"></el-input>
                </el-form-item>
            </div>
            <!-- 研究者信息 end -->

            <!-- 版本信息 begin -->
             
            <div :style="{
                width: activeName == 'tabThree' ? '100%' : '1px',
                height: activeName == 'tabThree' ? '100%' : '1px',
                overflow: activeName == 'tabThree' ? 'auto' : 'hidden',
            }">
            <div class="navigationBar">
                <div class="title">方案</div>
            </div>
                <div>
                                <el-form-item label="版本号"  prop="planVersionNum">
                                            <el-input size="small" v-model="ruleForm.planVersionNum"></el-input>
                                        </el-form-item>
                                        <el-form-item label="版本日期"  prop="planVersionDate">
                                            <el-date-picker size="small" v-model="ruleForm.planVersionDate" style="width: 100%" type="date" placeholder="选择日期"
                                                :picker-options="pickerOptions" @change="
                                                    (e) => {
                                                        dateChange(e)
                                                    }
                                                ">
                                            </el-date-picker>
                                        </el-form-item>
                            </div>
                <!-- <el-form-item label="方案" required prop="fa">
                    <el-input size="small" v-model="ruleForm.fa"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="ICF" required prop="icf">
                    <el-input size="small" v-model="ruleForm.icf"></el-input>
                </el-form-item> -->
                <div class="navigationBar">
                            <div class="title">ICF</div>
                        </div>
                        <div>
                                <el-form-item label="版本号"  prop="icfVersionNum">
                                            <el-input size="small" v-model="ruleForm.icfVersionNum"></el-input>
                                        </el-form-item>
                                        <el-form-item label="版本日期"  prop="icfVersionDate">
                                            <el-date-picker size="small" v-model="ruleForm.icfVersionDate" style="width: 100%" type="date" placeholder="选择日期"
                                                :picker-options="pickerOptions" @change="
                                                    (e) => {
                                                        dateChange(e)
                                                    }
                                                ">
                                            </el-date-picker>
                                        </el-form-item>
                            </div>
                        <div class="navigationBar">
                            <div class="title">研究病历</div>
                        </div>
                        <div><el-form-item label="版本号"  prop="mrVersionNum">
                                    <el-input size="small" v-model="ruleForm.mrVersionNum"></el-input>
                                </el-form-item>
                                <el-form-item label="版本日期"  prop="mrVersionDate">
                                    <el-date-picker size="small" v-model="ruleForm.mrVersionDate" style="width: 100%" type="date" placeholder="选择日期"
                                        :picker-options="pickerOptions" @change="
                                            (e) => {
                                                dateChange(e)
                                            }
                                        ">
                                    </el-date-picker>
                                </el-form-item></div>
                        <div class="navigationBar">
                            <div class="title">CRF</div>
                        </div>
                        <div>
                            <el-form-item label="版本号"  prop="crfVersionNum">
                                        <el-input size="small" v-model="ruleForm.crfVersionNum"></el-input>
                                    </el-form-item>
                                    <el-form-item label="版本日期"  prop="crfVersionDate">
                                        <el-date-picker size="small" v-model="ruleForm.crfVersionDate" style="width: 100%" type="date" placeholder="选择日期"
                                            :picker-options="pickerOptions" @change="
                                                (e) => {
                                                    dateChange(e)
                                                }
                                            ">
                                        </el-date-picker>
                                    </el-form-item>
                        </div>

                <!-- <el-form-item label="研究病历" required prop="yjbl">
                    <el-input size="small" v-model="ruleForm.yjbl"></el-input>
                </el-form-item>
                <el-form-item label="CRF" required prop="crf">
                    <el-input size="small" v-model="ruleForm.crf"></el-input>
                </el-form-item> -->
            </div>
            <!-- 版本信息 end -->


            <el-form-item label="操作原因"  prop="optReason" v-if="type != 'add'">
                <el-input type="textarea" size="small" v-model="ruleForm.optReason"></el-input>
            </el-form-item>

            <el-form-item v-if="type != 'look'">
                <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
                <el-button @click="resetForm('ruleForm')">重 置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { Utility } from "@/libs/utility"
import moment from "moment";
// import { SessionCommon } from "@/libs/sessionCommon"
export default {
    props: ["type", "data"],
    data() {
        return {
            activeName: 'tabOne',
            xmtype: Utility.getDictList("sample_lable_title"),
            ruleForm: {
                // 项目信息 begin
                sponsorId: '',
                sponsorName: "",
                croId: '',
                croName: "",
                pmName: '',
                pmNum: '',
                pmSimpleName: "",
                filingsNum: "",
                centerNum: "",
                planNum: "",
                sampleLableTitle:"",//样品标签标题
                innerPlanNum: "",
                expSampleCompany: "",
                dataMagAlys: "",
                // 项目信息 end
                // 研究者信息 begin
                researcherInfo: "",
                // 研究者信息 end
                // 版本信息 begin
                fa: "", // 方案
                bbh: "", // 版本号
                bbrq: "", // 版本日期
                icf: "", // ICF
                yjbl: "", // 研究病历
                crf: "", // CRF
                // 版本信息 end
                optReason: ""
            },
            rules: {
                sponsorId: [
                    { required: true, message: '请选择申办方', trigger: 'blur' },
                ],
                croId: [
                    { required: true, message: '请选择CRO', trigger: 'blur' },
                ],
                pmName: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ],
                // pmNum: [
                //     { required: true, message: '请输入项目编号', trigger: 'blur' },
                // ],
                // planNum: [
                //     { required: true, message: '请输入方案编号', trigger: 'blur' },
                // ],
                innerPlanNum: [
                    { required: true, message: '请输入内部编号', trigger: 'blur' },
                ],
                researcherInfo: [
                    { required: true, message: '请输入研究者信息', trigger: 'blur' },
                ],
                fa: [
                    { required: true, message: '请输入方案', trigger: 'blur' },
                ],
                bbh: [
                    { required: true, message: '请输入版本号', trigger: 'blur' },
                ],
                bbrq: [
                    { required: true, message: '请选择版本日期', trigger: 'blur' },
                ],
                icf: [
                    { required: true, message: '请输入ICF', trigger: 'blur' },
                ],
                yjbl: [
                    { required: true, message: '请输入研究病历', trigger: 'blur' },
                ],
                crf: [
                    { required: true, message: '请输入CRF', trigger: 'blur' },
                ],
                optReason: [
                    { required: this.type == 'edit', message: '请输入操作原因', trigger: 'blur' },
                ],
            },
            // 申办方信息
            sponsorList: [],
            // CRO信息
            croList: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date())
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit("pick", date)
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", date)
                        },
                    },
                ],
            },
        };
    },
    methods: {
        dateChange(value) {
            this.ruleForm.bbrq = moment(value).format("YYYY-MM-DD")
        },
        croChange(e) {
            this.ruleForm.croName = this.croList.find(t => t.value == e).label
        },
        sponsorChange(e) {
            this.ruleForm.sponsorName = this.sponsorList.find(t => t.value == e).label
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit("projectSubmit", this.ruleForm)
                } else {
                    PopupCommon.notify("info", "请将每个tab的信息填写完整！")
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getBaseInfo() {
            let self = this
            Promise.all([AjaxCommon("/ccdc/cfg/pm/pmSponsor/listByPage", "post", { "pmName": "", "userName": "", "pageNo": 1, "pageSize": 200 }),
            AjaxCommon("/ccdc/cfg/pm/pmCro/listByPage", "post", { corName: "", projectPerson: "", pageNo: 1, pageSize: 200 })
            ]).then(res => {
                console.log(res)
                // 获取申办方信息
                let sponsorList = res[0].data.result.records
                if (sponsorList.length > 0) {
                    sponsorList = sponsorList.map(t => {
                        t.value = t.id
                        t.label = t.pmName
                        return t
                    })
                }
                self.sponsorList = sponsorList
                // 获取CRO信息
                let croList = res[1].data.result.records
                if (croList.length > 0) {
                    croList = croList.map(t => {
                        t.value = t.id
                        t.label = t.corName
                        return t
                    })
                }
                self.croList = croList
            })
        }
    },
    mounted() {
        if (this.type != 'add') {
            this.ruleForm = this.data
        }
        // console.log(Utility.getDictList("sample_lable_title"));
        console.log(this.data)
    },
    created() {
        this.getBaseInfo()
    },
};
</script>

<style scoped>
    .navigationBar {
		height: 36px;
		line-height: 36px;
		background-color: #fff;
		margin-top: 10px;
		display: flex;
	}
	.navigationBar .title {
		position: relative;
		text-indent: 20px;
		font-size: 15px;
	}
	.navigationBar .title::before {
		background-color: rgb(22, 132, 252);
		height: 16px;
		width: 3px;
		content: "";
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 1;
	}
	.navigationBar .search {
		flex: 1;
		margin-left: 20px;
		margin-right: 10px;
		text-align: right;
	}
</style>
